<template>
	<view class="content">
		<view class="title">提货单据<view class="icon iconfont icon-guanyu"></view>
		</view>
		<view class="item">
			<view class="code">
				<text>货物信息</text>
			</view>
			<view class="goodslist">
				<text class="name">商品名称</text>
				<text class="name">商品数量</text>
				<text class="name">单位</text>
				<text class="name">商品单价</text>
			</view>
			<view class="goodslist" v-for="(item,index) in info.goods" :key="index">
				<text class="name">{{item.goods_name}}</text>
				<text class="name">{{(item.goods_num*1).toFixed(4)}}</text>
				<text class="name">{{item.sku_name}}</text>
				<text class="name">{{item.goods_price}}</text>
			</view>
		</view>
		<view class="title iconbox">发货信息<view class="icon iconfont icon-guanyu"></view>
		</view>
		<!-- <view class="list">
			<text class="name">选择发货地</text>
			<text class="tips" @tap="visible=true" v-if="!orderInfo.area">请选择</text>
			<text class="val" v-else>{{orderInfo.area}}</text>
			<cityPicker :column="3" :mask-close-able="true" @confirm="confirm" @cancel="visible=false"
				:visible="visible" />
		</view> -->
		<view class="list">
			<text class="name">发货地址</text>
			<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="orderInfo.beg_land" />
		</view>
		<view class="list">
			<text class="name">收货地址</text>
			<input type="text" placeholder="请输入" class="val" placeholder-class="tips"
				v-model="orderInfo.consignee_address" />
		</view>
		<view class="list">
			<text class="name">收货人电话</text>
			<input type="text" placeholder="请输入" class="val" placeholder-class="tips"
				v-model="orderInfo.consignee_phone" />
		</view>
		<view class="list">
			<text class="name">指派司机</text>
			<!-- <picker mode="selector" :range="driverList" range-key="nickname" @change="checkDriver"> -->
				<text v-if="!orderInfo.driver" class="tips" @tap="showPop=true">请选择</text>
				<text v-else class="form-input"  @tap="showPop=true">{{orderInfo.driver}}</text>
			<!-- </picker> -->
		</view>
		<view class="list">
			<text class="name">选择商品</text>
			<picker mode="selector" :range="goodsList" range-key="goods_name" @change="checkGoods">
				<text v-if="!orderInfo.goods_name" class="tips">请选择</text>
				<text v-else class="form-input">{{orderInfo.goods_name}}</text>
			</picker>
		</view>
		<view class="list">
			<text class="name">输入运输数量</text>
			<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="orderInfo.goods_num" />
		</view>
		<view class="list">
			<text class="name">计划装货时间</text>
			<uni-datetime-picker type="date" v-model="orderInfo.plan_beg_date" class="val">
				<text v-if="!orderInfo.plan_beg_date" class="tips">请选择</text>
				<text v-else class="form-input">{{orderInfo.plan_beg_date}}</text>
			</uni-datetime-picker>
		</view>
		<view class="list">
			<text class="name">计划到货时间</text>
			<uni-datetime-picker type="date" v-model="orderInfo.plan_end_date" class="val">
				<text v-if="!orderInfo.plan_end_date" class="tips">请选择</text>
				<text v-else class="form-input">{{orderInfo.plan_end_date}}</text>
			</uni-datetime-picker>
		</view>
		<!-- <view class="list">
			<text class="name">截止接单时间</text>
			<uni-datetime-picker type="date" v-model="orderInfo.end" class="val">
				<text v-if="!orderInfo.end" class="tips">请选择</text>
				<text v-else class="form-input">{{orderInfo.end}}</text>
			</uni-datetime-picker>
		</view> -->
		<view class="date-background" v-if="showPop">
			<view class='date-container'>
				<view class="transparent">
					<view class='date-confirm'>
						<view @click="hiddeDatePicker" class="pickerCancel">取消</view>
						<input cursorSpacing='500' v-model="searchValue" placeholder="请输入司机名称" placeholder-class="input-style" class="ipt"
							@input='searchChange' />
						<view @click="confirm1" class="pickerConfirm">确定</view>
					</view>
					<picker-view @change="bindChange" :value="setValues">
						<picker-view-column class="pickViewColumn">
							<view v-for="item in driverList" :key="item.id"
								style="line-height: 68rpx;text-align: center;">{{item.nickname}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>

		<view class="btnbox">
			<navigator class="btn next" :url="'./confirmOrder?info=' + JSON.stringify(orderInfo)" hover-class="none">下一步
			</navigator>
			<navigator class="btn" open-type="navigateBack" hover-class="none">返回</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		getDrivers,
		getOrderInfo
	} from '../../network/order.js';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	const orderInfo = reactive({
		purchase_order_id: '',
		// area: '',
		beg_land: '',
		consignee_address: '',
		consignee_phone: '',
		driver: '',
		driver_id: '',
		goods_name: '',
		goods_id: '',
		goods_num: '',
		goods_price: '',
		sku_name: '',
		plan_beg_date: '',
		plan_end_date: '',
		// end: ''
	})
	onShow(() => {
		getDriverList()
	})
	onLoad((res) => {
		orderInfo.purchase_order_id = res.id
		getInfo(res.id)
	})
	const getDriverList = () => {
		getDrivers({name:searchValue.value}).then(res => {
			Object.assign(driverList, res.data.data)
		})
	}
	const info = reactive({})
	const getInfo = (id) => {
		let data = {
			order_id: id
		}
		getOrderInfo(data).then(res => {
			Object.assign(info, res.data.data)
			orderInfo.prepared_by = info.prepared_by
			// orderInfo.consignee_address = info.enquiry.consignee_address
			Object.assign(goodsList, info.goods)
		})
	}
	const visible = ref(false)
	const confirm = (e) => {
		orderInfo.area = e.name
		visible.value = false
	}
	const driverList = reactive([])
	const checkDriver = (e) => {
		orderInfo.driver = driverList[e.detail.value].nickname
		orderInfo.driver_id = driverList[e.detail.value].id
	}
	const goodsList = reactive([])
	const checkGoods = (e) => {
		orderInfo.goods_name = goodsList[e.detail.value].goods_name
		orderInfo.goods_id = goodsList[e.detail.value].goods_id
		orderInfo.goods_price = goodsList[e.detail.value].goods_price
		orderInfo.sku_name = goodsList[e.detail.value].sku_name
	}
    const showPop = ref(false)
	const searchValue = ref('')
	const setValues = ref([0])
	const confirm1 = () => {
		orderInfo.driver = driverList[currentDriver.value].nickname
		orderInfo.driver_id = driverList[currentDriver.value].id
		showPop.value = false
		setValues.value[0] = currentDriver.value
	}
	const searchChange = (e) => {
		driverList.length = 0
		getDriverList()
	}
	const hiddeDatePicker = () => {
        showPop.value = false;
		currentDriver.value = null;
	}
	const currentDriver = ref(0)
	const bindChange = (e) => {
		currentDriver.value = e.detail.value[0];
	}
</script>

<style lang="scss">
	.title {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin-top: 2rpx;
		font-weight: bold;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 10rpx;

		.icon {
			font-size: 40rpx;
			color: #ff6700;
			font-weight: normal;
		}
	}

	.date-background {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		background-color: rgba(0, 0, 0, .6);
		.date-container {
			position: absolute;
			width: 100%;
			height: 600rpx;
			overflow: hidden;
			background: #fff;
			bottom: 0;
			z-index: 1000;
			.date-confirm {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				font-size: 34rpx;
				line-height: 100rpx;
				z-index: 2;
				.pickerCancel {
					font-size: 30rpx;
					color: #777;
					margin-right: 30rpx;
				}
				
				.pickerConfirm {
					font-size: 30rpx;
					color: #4C83D6;
					margin-left: 30rpx;
					border-radius: 12rpx;
				}
				.ipt{
					border: 2rpx solid #f1f1f1;
					padding: 6rpx 16rpx;
				}
			}
			.pickViewColumn {
				height: 600rpx;
			}
		}
	}
	

	.indicator {
		height: 80rpx;
	}

	

	.item {
		margin-bottom: 2rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			.status {
				font-size: 28rpx;
			}
		}

		.goodslist {
			width: 100%;
			margin: 10rpx 0;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333;
			display: flex;
			justify-content: space-between;

			.name {
				width: 180rpx;
				text-align: right;
				text-align: center;
			}
		}
	}

	.list {
		width: 100%;
		display: flex;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		font-size: 28rpx;
		justify-content: space-between;

		.name {
			width: 200rpx;
		}

		.tips {
			color: #999;
			width: 500rpx;
			text-align: right;
			font-size: 24rpx;
		}

		.val {
			color: #333;
			width: 520rpx;
			text-align: right;
			font-size: 28rpx;
		}
	}

	.btnbox {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;

		.btn {
			width: 200rpx;
			height: 60rpx;
			background-color: #fff;
			line-height: 60rpx;
			text-align: center;
			border-radius: 12rpx;
			font-size: 26rpx;
		}

		.next {
			background-color: #ffc400;
		}
	}
</style>